<template>
<!-- 购物车页面 -->
  <div id="shopping">
    <el-container>
      <el-header>
        <paymentTitleBar :payTitle="payTitle" @pass='assembly'></paymentTitleBar>
      </el-header>
      <el-main>
        <div class="containers" v-if="shopping_bool">
          <table class="table table-bordered table-hover text-center">
            <tr class="table_tr1">
              <td>
                <input type="checkbox" v-model="checkAll" @click="selectAll" />
                <span>{{$t("Shopping.all")}}</span>
              </td>
              <td>{{$t("Shopping.commodityName")}}</td>
              <td>{{$t("Shopping.Price")}}</td>
              <td>{{$t("Shopping.num")}}</td>
              <td>{{$t("Shopping.Subtotal")}}</td>
              <td>{{$t("Shopping.operation")}}</td>
            </tr>
            <tr v-for="(item,index) in listInfo" :key="item.goods_id"  class="table_tr2">
              <td>
                <input type="checkbox" :value="item.goods_id" v-model="checkItem" @change="selectOne(index)" />
              </td>
              <td>
                <div class="commodityNameImg" @click="PrDetails(item.goods_id)"><img :src="url + item.goods_image" alt=""></div>
                <div class="commodityNameText" @click="PrDetails(item.goods_id)">{{item.title}}</div>
              </td>
              <td>{{item.min_price}} {{$t("Shopping.RMB")}}</td>
              <td>
                <el-input-number type="number" v-model.number="item.num" :min="1" :max="Number(item.stock)" size="medium" :precision="0"></el-input-number>
              </td>
              <td>{{item.min_price * item.num | decimal}} {{$t("Shopping.RMB")}}</td>
              <td>
                <span class="el-icon-error" @click="del(index)"></span>
              </td>
            </tr>
          </table>
          <!-- 结算 -->
          <div class="table_accounts">
            <div class="accounts_left">
              <router-link to="/goods">{{$t("Shopping.ContinueShopping")}}</router-link>
              <span>{{$t("Shopping.whole")}} <i>{{totalNum}}</i> {{$t("Shopping.piece")}}，{{$t("Shopping.Selected")}} <i>{{count}}</i> {{$t("Shopping.piece")}}</span>
            </div>
            <div class="accounts_right">
              <div class="accounts_download"><a @click="downloadExcel">{{$t("Shopping.download")}}</a></div>
              <span>{{$t("Shopping.total")}} <b><i>{{sum}}</i> {{$t("Shopping.RMB")}}</b></span>
              <button @click="totalMoney(addClass)" :class="[addClass ? 'accounts_button_gran' : 'accounts_button_orange']">{{$t("Shopping.ToSettle")}}</button>
            </div>
          </div>
        </div>
        <!-- 购物车没东西时显示 -->
        <div class="showNull" v-else>
          <div><img src="../../../public/img/gouwuche.jpg" alt=""></div>
          <h1>{{$t("Shopping.NoGoods")}}</h1>
          <h2><router-link to="./goods">{{$t("Shopping.ContinueShopping")}}</router-link></h2>
        </div>
        
      </el-main>
      <!-- 底部 -->
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import paymentTitleBar from '@/components/PaymentTitleBar';
import table2excel from 'js-table2excel';
export default {
  data() {
    return {
      payTitle: {title: this.$t('Shopping.cart'), id:'shopping'},
      listInfo: [],      //渲染数据
      checkItem: [],  //选中的商品
      checkAll: false,  //是否全选
      url: "https://mp.uekea.cn/attachment/", //图片拼接
      shopping_bool: true,   //购物车没数据的时候，false显示另一个div
      lengs: 0,   //下载的规格参数最大长度
      Nums: 0,    //添加次数
      // userName: '',   //用户名
      addText: [],  //储存要添加的商品数据
      // Excel表格，标题
      column: [
        {
          title: '图片',
          key: 'pic',
          type: 'image',
          width: 100,
          height: 70,
        },
        {
          title: '标题',
          key: 'name',
          type: 'text'
        },
        {
          title: '单价',
          key: 'jiage',
          type: 'text'
        },
        {
          title: '数量',
          key: 'shuliang',
          type: 'text'
        },
        {
          title: '小计',
          key: 'subtotal',
          type: 'text'
        },
      ],
      datas: [],    // excel表格数据
      excelName: '广州优粤家',  //excel表名
    };
  },
  components: {
    Footer,
    paymentTitleBar
  },
  methods: {
    // 下载excel表格
    downloadExcel() {
      var _this = this;
      if(_this.checkItem.length > 0) {
        // 这是标题数组
        let columnMap = _this.column.map(function(item){
            return item;
        },this);
        let datasMap = _this.datas.map(function(item){
            return item;
        },this);
        // 规格参数，获取
        let paramArr = [];
        let parObj = {};
        for(let i = 0; i < _this.listInfo.length; i++) {
          if(_this.listInfo[i].param != undefined) {
            parObj = {id:_this.listInfo[i].goods_id, param: _this.listInfo[i].param};
            paramArr.push(parObj);
          }
        }
        
        let ko = [];  // 储存规格参数数组的下标
        let ki = [];  // 勾选数组的id
        // 循环，不管有没有规格参数，勾选的都要下载，判断，勾选的和渲染数组相同id的，push到liS数组
        let liS = [];
        for(let u = 0; u < _this.listInfo.length; u++) {
          for(let up = 0; up < _this.checkItem.length; up++) {
            // 判断渲染数组和勾选有规格参数的数组，把渲染数组相同id的列表添加到另一个数组
            if(_this.listInfo[u].goods_id == _this.checkItem[up]) {
              liS.push(_this.listInfo[u]);
            }
          }
        }
        // 循环勾选的数组liS，判断勾选的数组，是否有规格参数，有就添加到另一个数组，拿到勾选数组里面有规格参数的下标，和勾选数组和规格参数id相同的规格参数，数组的下标
        for(let k = 0; k < liS.length; k++) {
          for(let y = 0; y < paramArr.length; y++) {
            // 判断勾选的id里面和储存参数的id，相同，就等于勾选里面有储存的规格参数，把勾选数组的id和储存规格参数的数组下标,各添加到另一个数组，待用
            if(liS[k].goods_id == paramArr[y].id) {
              ko.push(y);   //勾选数组里面的下标
              ki.push(Number(paramArr[y].id));   //规格数组里面的下标
              if(paramArr[y].param.length > _this.lengs) {
                _this.lengs = paramArr[y].param.length;
              }
            }
          }
        }
        // 循环勾选的liS数组，判断勾选里面，有几个有规格参数的
        for(let x = 0; x < liS.length; x++) {
          // 有就给下载Excel表格，的内容添加一行，有一次就添加一行
          datasMap.push(
            {
              pic: '',
              name: '',
              jiage: '',
              shuliang: 1,
              subtotal: 0,
            }
          )
          let idIndex = ki.indexOf(Number(liS[x].goods_id))
          if(idIndex != -1) {
            _this.Nums += 1;
            // 标题只添加一次
            if(_this.Nums == 1) {
              for (let i = 0; i < _this.lengs; i++) {
                // i是标题数组的长度，规格参数有多长，标题就添加多少个，每个是一个单元格
                columnMap.push(
                  {
                    title: "",
                    key: 'shuju'+i,
                    type: 'text'
                });
              }
            }
            for (let i = 0; i < _this.lengs; i++) {
                // j是表格数据的数组长度，添加除了固定外的标题和
                if(paramArr[ko[idIndex]].param[i] == undefined) {
                  // 没内容赋值空
                  datasMap[x]['shuju'+i] = ""
                } else {
                  // 有内容，添加
                  datasMap[x]['shuju'+i] = paramArr[ko[idIndex]].param[i].title + ":" + paramArr[ko[idIndex]].param[i].value;
                }
            }
              // 判断渲染数组和勾选上的储存数组下标id，有相同就把当前列表数据，替换excel表格内容
              if(liS[x].goods_id == paramArr[ko[idIndex]].id) {
                // 替换表格内容的
                datasMap[x].pic = _this.url + liS[x].goods_image;
                datasMap[x].name = liS[x].title;
                datasMap[x].jiage = Number(liS[x].min_price); 
                datasMap[x].shuliang = Number(liS[x].num);
                datasMap[x].subtotal = Number(liS[x].min_price) * Number(liS[x].num);
              }
          } else {
            for (let i = 0; i < _this.lengs; i++) {
                  datasMap[x]['shuju'+i] = "";
            }
            datasMap[x].pic = _this.url + liS[x].goods_image;
            datasMap[x].name = liS[x].title;
            datasMap[x].jiage = Number(liS[x].min_price); 
            datasMap[x].shuliang = Number(liS[x].num);
            datasMap[x].subtotal = Number(liS[x].min_price) * Number(liS[x].num);
          }
        }
        // 判断要下载的内容是否为空
        if(datasMap.length > 0) {
          table2excel(columnMap, datasMap, _this.excelName);
          _this.Nums = 0;
        } else {
          _this.$MessageAlert(true, _this.$t('Shopping.NotDownload'), 'error');
        }
      } else {
        _this.$MessageAlert(true, _this.$t('Shopping.UncheckedDownload'), 'error');
      }
    },
    // 点击删除
    del(index) {
      var _this = this;
      _this.$confirm(_this.$t('Shopping.medelt'), _this.$t('Shopping.Tips'), {
          confirmButtonText: _this.$t('Shopping.yes'),
          cancelButtonText: _this.$t('Shopping.no'),
          type: 'warning'
        }).then(() => {
          let arrID = [];
          arrID[0] = _this.listInfo[index].id;
          // 请求后台数据
          // _this.$dele('cart?user_id='+_this.$Cookie.getCookie("userID")+'&goods_id='+_this.listInfo[index].goods_id
          _this.$dele(`cart/${_this.$Cookie.getCookie("userID")}?id=${arrID}`
          ).then(res=>{
            if(res.code=="200"){
              _this.$MessageAlert(false, _this.$t('Shopping.deletesu'), "success")
              let idNum = _this.checkItem.indexOf(_this.listInfo[index].goods_id);  // 查找删除id是否在勾选数组里面
              // 判断是否有勾选的商品，如果有就查找要删除的id,是否也勾选上了，如果勾选上就删除勾选上的id，如果没有就直接删除
              if(_this.checkItem.length > 0) {
                if(idNum != -1) {
                  _this.checkItem.splice(idNum, 1);
                }
              }
              _this.listInfo.splice(index, 1);
              if(_this.listInfo.length < 1) {
                _this.shopping_bool = false;
                _this.$store.commit("goods", []);
              }
              _this.ifCheckAll();   //判断是否全选
            } else if(res.code=="404") {
              _this.$MessageAlert(true, res.data, 'error');
            } else if(res.code=="400"){
              _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            }
          })
          
        })
    },
    // 点击勾选
    selectOne(index) {
      // 当单选的数组长度和要渲染的数组长度一样是，就是全部都选择了，就把全选勾上
      if (this.checkItem.length == this.listInfo.length) {
        // 是否全选
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      // 判断当前商品是否计算金额，如果是，点击的时候就去掉，否则就加上当前金额
      if (this.listInfo[index].is_select == '1') {
        this.listInfo[index].is_select = '0';
      } else {
        this.listInfo[index].is_select = '1';
      }

      
    },
    // 全选
    selectAll() {
      var _this = this;
      _this.checkItem = [];
      if (!_this.checkAll && _this.listInfo.length > 0) {
        for (let i = 0; i < _this.listInfo.length; i++) {
          // 把全部的id添加到数组里面，就是全部勾选上了。
          _this.checkItem.push(_this.listInfo[i].goods_id);
          _this.listInfo[i].is_select = '1';
        }
      } else {
        _this.checkItem = [];
        _this.checkAll = false;
        for (let i = 0; i < _this.listInfo.length; i++) {
          _this.listInfo[i].is_select = '0';
        }
      }
    },
    // 结算
    totalMoney(data) {
      var _this = this;
      if(data) {
        let arr = [];
        // let discount = 0.8;     // 会员折扣，设计师购买时的折扣
        let evel = null;           // 用户等级，null 为普通用户，1 为vip 有0.8折
        // for(let i = 0; i < _this.listInfo.length; i++) {
        //   for(let j = 0; j < _this.checkItem.length; j++) {
        //     if(_this.listInfo[i].goods_id == _this.checkItem[j]) {
        //       arr.push({
        //         goods_id: _this.listInfo[i].goods_id, 
        //         merch_id: _this.listInfo[i].merch_id, 
        //         id: _this.listInfo[i].id, 
        //         title: _this.listInfo[i].title, 
        //         goods_image: _this.listInfo[i].goods_image, 
        //         min_price: _this.listInfo[i].min_price, 
        //         num: _this.listInfo[i].num,
        //         isnodiscount: _this.listInfo[i].isnodiscount,
        //       })
              
        //     }
        //   }
        // }
        if(_this.$Cookie.getCookie("userLevel") !== undefined) {
          evel = _this.$Cookie.getCookie("userLevel");
        }
        for(let i = 0; i < _this.listInfo.length; i++) {
          for(let j = 0; j < _this.checkItem.length; j++) {
            if(_this.listInfo[i].goods_id == _this.checkItem[j]) {
              // 0 为 参与商城折扣，1 为 不参与
              if(_this.listInfo[i].isnodiscount === 0 && evel === 1) {
                arr.push({
                  goods_id: _this.listInfo[i].goods_id, 
                  merch_id: _this.listInfo[i].merch_id, 
                  id: _this.listInfo[i].id, 
                  title: _this.listInfo[i].title, 
                  goods_image: _this.listInfo[i].goods_image, 
                  min_price: _this.listInfo[i].min_price, 
                  num: _this.listInfo[i].num,
                  isnodiscount: _this.listInfo[i].isnodiscount,
                })
              } else {   
                arr.push({
                  goods_id: _this.listInfo[i].goods_id, 
                  merch_id: _this.listInfo[i].merch_id, 
                  id: _this.listInfo[i].id, 
                  title: _this.listInfo[i].title, 
                  goods_image: _this.listInfo[i].goods_image, 
                  min_price: _this.listInfo[i].min_price, 
                  num: _this.listInfo[i].num,
                  isnodiscount: _this.listInfo[i].isnodiscount,
                })
              }
            }
          }
        }
        _this.$store.commit("checkS", arr);
        _this.$router.push({"path": "./transport"});

        // _this.$get(`user/info/${_this.$Cookie.getCookie("userID")}`
        // ).then(res => {
        //     if(res.code == 200) {
        //       evel = res.data.level;
        //       for(let i = 0; i < _this.listInfo.length; i++) {
        //         for(let j = 0; j < _this.checkItem.length; j++) {
        //           if(_this.listInfo[i].goods_id == _this.checkItem[j]) {
        //             // 0 为 参与商城折扣，1 为 不参与
        //             if(_this.listInfo[i].isnodiscount === 0 && evel === 1) {
        //               arr.push({
        //                 goods_id: _this.listInfo[i].goods_id, 
        //                 merch_id: _this.listInfo[i].merch_id, 
        //                 id: _this.listInfo[i].id, 
        //                 title: _this.listInfo[i].title, 
        //                 goods_image: _this.listInfo[i].goods_image, 
        //                 min_price: _this.listInfo[i].min_price, 
        //                 num: _this.listInfo[i].num,
        //                 isnodiscount: _this.listInfo[i].isnodiscount,
        //               })
        //             } else {   
        //               arr.push({
        //                 goods_id: _this.listInfo[i].goods_id, 
        //                 merch_id: _this.listInfo[i].merch_id, 
        //                 id: _this.listInfo[i].id, 
        //                 title: _this.listInfo[i].title, 
        //                 goods_image: _this.listInfo[i].goods_image, 
        //                 min_price: _this.listInfo[i].min_price, 
        //                 num: _this.listInfo[i].num,
        //                 isnodiscount: _this.listInfo[i].isnodiscount,
        //               })
        //             }
        //           }
        //         }
        //       }
        //       _this.$store.commit('checkS', arr);
        //       _this.$router.push({"path": "./transport"});
        //     }
        // })

        
      } 
    },
    // 判断是否全选
    ifCheckAll() {
      var _this = this;
      // 判断是否全选
      if (_this.listInfo.length > 0 && _this.checkItem.length == _this.listInfo.length) {
        // 是否全选
        _this.checkAll = true;
      }  else {
        _this.checkAll = false;
      }
    },
    // 监听页面刷新或者关闭
    monitorPage() {
      var _this = this;
      if(_this.listInfo.length > 0) {
        let id = '';
        let num = '';
        let sel = '';
        let datas = [];
        for( let i = 0; i < _this.listInfo.length; i++) {
          let idNums = {goods_id:_this.listInfo[i].goods_id, num:_this.listInfo[i].num, is_select:_this.listInfo[i].is_select};
          datas.push(idNums);
          id += _this.listInfo[i].goods_id + ',';
          num += JSON.stringify(_this.listInfo[i].num) + ',';
          sel += _this.listInfo[i].is_select + ',';
        }
        if(_this.$Cookie.getCookie("token") != undefined) {
          // 购物车，要添加的商品信息
          _this.$store.commit('goods', datas);
        }
        id = id.substr(0, id.length -1 );
        num = num.substr(0, num.length -1 );
        sel = sel.substr(0, sel.length -1 );
        // 请求后台数据
        _this.$post('cart/change',{
            user_id: _this.$Cookie.getCookie("userID"),
            goods_id: id,
            num: num,
            is_select: sel,
        }).then(() => {

        })
      }
    },
    // 点击商品，跳转到商品详情
    PrDetails(id) {
      this.$router.push({"path":"./goodsDetail",query: {id: id}});
    },
    // 退出登陆的时候，保存数据
    assembly(d) {
      var _this = this;
      if(d) {
        if(_this.listInfo.length > 0) {
          let id = '';
          let num = '';
          let sel = '';
          for( let i = 0; i < _this.listInfo.length; i++) {
            id += _this.listInfo[i].goods_id + ',';
            num += JSON.stringify(_this.listInfo[i].num) + ',';
            sel += _this.listInfo[i].is_select + ',';
          }
          id = id.substr(0, id.length -1 );
          num = num.substr(0, num.length -1 );
          sel = sel.substr(0, sel.length -1 );
          // 请求后台数据
          _this.$post('cart/change',{
              user_id: _this.$Cookie.getCookie("userID"),
              goods_id: id,
              num: num,
              is_select: sel,
          }).then((res) => {
            if(res.code == "200") {
              _this.$Cookie.removeCookie('userID');
              _this.$Cookie.removeCookie('token');
              _this.$store.commit('goods', []);
              _this.$router.push({"path":"/"});
            }
          })
        } 
        
      }
    }
    // 渲染页面请求购物车商品
    // DataGoods() {
    //   var _this = this;
    //   let list = _this.listInfo;
    //   if(list.length > 0) {
    //     _this.ifCheckAll();   //调用判断全选方法
    //   } else {
    //     _this.shopping_bool = false;
    //   }
    // }
  },
  // 计算属性
  computed: {
    // 总金额
    sum() {
      var total = 0;
      for (let i = 0; i < this.listInfo.length; i++) {
        if (this.listInfo[i].is_select == '1') {
          total += parseFloat(this.listInfo[i].min_price) * parseFloat(this.listInfo[i].num);
        }
      }
      return total.toFixed(2);
    },
    // 勾选的商品数量
    count: function() {
      var total = 0;
      for (let i = 0; i < this.listInfo.length; i++) {
        if (this.listInfo[i].is_select == '1') {
          total += parseInt(this.listInfo[i].num);
        }
      }
      return total;
    },
    // 总件数
    totalNum: function() {
      var total = 0;
      for (let i = 0; i < this.listInfo.length; i++) {
          total += parseInt(this.listInfo[i].num);
      }
      return total;
    },
    // 给结算按钮添加class
    addClass: function() {
      var bool = false;
      if(this.checkItem.length>0) {
        bool = true;
      }else {
        bool = false;
      }
      return bool;
    },
  },
  filters: {
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
  },
  created () {
    var _this = this;
    // 判断token,赋值用户名
    if(_this.$Cookie.getCookie('token') == undefined) {
      _this.$router.push({"path":"/"})
    }
    // 请求后台数据
    _this.$get(`cart/${_this.$Cookie.getCookie("userID")}`).then(res=>{
      if(res.code == 200){
        if(res.data.length > 0) {
          _this.listInfo = res.data;
          for(let i = 0; i < res.data.length; i++) {
            if(res.data[i].is_select == '1') {
              _this.checkItem.push(res.data[i].goods_id)
            }
          }
        } else {
          // 购物车没有数据
          _this.shopping_bool = false;
          _this.$store.commit("goods", []);
        }
      }
      
      if(_this.listInfo.length > 0) {
        _this.ifCheckAll();   //调用判断全选方法
      } else {
        _this.shopping_bool = false;
        _this.$store.commit("goods", []);
      }
      window.addEventListener('beforeunload', _this.monitorPage());
    })
  },
  beforeDestroy() {
    this.monitorPage();  //调用刷新或者关闭方法
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.monitorPage())
  },
};
</script>

<style lang="less" scoped>
#shopping {
  min-width: 1355px;
}
.el-header {
    background-color: white!important;
}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  height: auto!important;
  padding: 0px;
}
.el-main {
  color: #333;
  text-align: center;
  padding: 40px 80px;
  // 计算减去头部和底部的高度，就是中间的高度
  min-height: calc(100vh - 100px - 220px);
  min-width: 1350px;
}
// 头部购物车标题
// .my_shoppingTrolley {
//   border-bottom: 2px solid #ff6700;
//   font-size: 25px;
//   height: 100px;
//   line-height: 100px;
// }
// .my_shoppingContent {
//   width: 70%;
//   height: 100%;
//   margin: auto;
//   .my_shopText {
//     float: left;
//     height: 100px;
//     p {
//       display: inline-block;
//       height: 100%;
//       margin-right: 50px;
//       vertical-align: middle;
//       img {
//         height: 100%;
//       }
//     }
//   }
//   .my_user {
//     float: right;
//     .ng_user_name {
//       margin-left: 30px;
//       margin-right: 7px;
//       /deep/ .el-dropdown {
//         display: block;
//         height: 55px;
//       }
//       .ng_span {
//         display: inline-block;
//         margin-right: 18px;
//         height: 30px;
//         h5{
//           margin: 0px;
//           display: inline-block;
//           width: 50px;
//           text-transform: none;
//           overflow:hidden;
//           text-overflow:ellipsis;
//           white-space: nowrap;
//           color: black;
//           font-size: 13px;
//           font-family: inherit;
//           font-weight: 500;
//         }
//       }
//     }
//   }
// }
// 框架
.containers {
  padding: 0px;
  width: 80%;
  min-width: 1180px;
  margin: auto;
  margin-bottom: 80px;
}
// 表格
.table {
  font-size: 17px;
  border: 0px;
  tr {
    height: 100px;
    border-bottom: 1px solid #ccc;
  }
  .table_tr1 {
    letter-spacing:2px;
    td:nth-child(1) {
      min-width: 100px;
      input { margin-right: 8px;margin-top: 0px;vertical-align: top;}
      span {letter-spacing:2px; }
    }
    td:nth-child(3) {
      min-width: 150px;
    }
    td:nth-child(4) {
      min-width: 160px;
    }
    td:nth-child(5) {
      min-width: 150px;
      
    }
    td:nth-child(6) {
      min-width: 100px;
    }
  }
  .table_tr2 {
    td:nth-child(2) {
      text-align: left;
    }
    td:nth-child(5) {
      color: #ff6700;
    }
  }
  .commodityNameImg {
    height: 60px;
    width: 60px;
    display: inline-block;
    line-height: 60px;
    margin-left: 30px;
    margin-right: 30px;
    img {
        height: auto;
        width: auto;
        cursor:pointer;
    }
  }
  .commodityNameText {
      max-width: 350px;
      display: inline-block;
      vertical-align: middle;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      cursor:pointer;
  }
} 
// 选择框样式
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    position: relative;
    margin-top: 0px;
  }
  input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #CACDCF
  }
  input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #ff6700;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #ff6700;
    font-size: 18px;
    font-weight: bold;
  }  
// 数量input框
/deep/ .el-input {
  width: 135px;
}
/deep/ .el-input-number {
  width: 135px;
  font-size: 15px;
}
// 删除图标
/deep/ .el-icon-error {
    font-size: 25px;
    color: #ccc;
    vertical-align: middle;
}
/deep/ .el-icon-error:hover {
  color: red;
}
// 结算
.table_accounts {
  width:100%;
  padding: 0px 20px;
  margin:auto;
  display: flex;
  justify-content: space-between;
  min-width: 1050px;
  .accounts_left {
    line-height: 60px;
    a {
      display: inline-block;
      margin-left: 18px;
      margin-right: 20px;
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: #ff6700;
    }
    i {
      color: #ff6700;
      font-style: normal;
    }
  }
  .accounts_right {
    font-size: 16px;
    line-height: 41px;
    b {
      color: #ff6700;
      i {
        font-size: 25px;
        font-style: normal;
      }
    }
    button {
      height: 60px;
      width: 170px;
      font-size: 20px;
      margin-left: 20px;
      font-family: 微软雅黑;
    }
    .accounts_button_orange {
      color: #999;
    }
    .accounts_button_gran {
      background-color: #ff6700;
      color: white;
    }
    .accounts_download {
      display: inline-block;
      margin-right: 70px;
      a {
        color: black;
      }
    }
  }
}
.showNull {
  margin-top: 30px;
  h1 {
    font-size: 30px;
    margin-top: 50px;
  }
  h2 {
    font-size: 25px;
    margin-top: 30px;
  }
}
</style>